<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="./js/axios.min.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="wh">
        <div class="bg">
            <video src="./images/duoyun.mp4" poster="./images/bg_duoyun.jpg" loop='loop' autoplay='autoplay' muted='muted'></video>
        </div>
        <h3>天气预报</h3>
        <div class="search">
            <input type="text" name="" id="" placeholder="请输入所需查询的城市" v-model='city1' @keyup.enter='getWh'>
            <button @click='getWh'>搜索</button>
            <ul>
                <li @click='hotCity("北京")'>北京</li>
                <li @click='hotCity("上海")'>上海</li>
                <li @click='hotCity("广东")'>广东</li>
                <li @click='hotCity("深圳")'>深圳</li>


            </ul>
        </div>
        <!-- 动态生成天气 -->
        <!-- date: "25日星期六"
        fengli: "<![CDATA[3级]]>"
        fengxiang: "东南风"
        high: "高温 29℃"
        low: "低温 23℃"
        type: "多云" -->
        <ul class="tab">
            <li v-for='(iteam,index) in forecast'>
                <h4>{{iteam.date}}</h4>
                <span>风力：{{iteam.fengli.slice(9,11)}}</span> &nbsp;
                <em>{{iteam.high}}</em>&nbsp;
                <span>{{iteam.low}}</span>&nbsp;
                <em>{{iteam.type}}</em>&nbsp;
            </li>
        </ul>
    </div>

</body>
<script>
    var vm = new Vue({
        el: '.wh',
        data: {
            city1: '',
            forecast: '',
            // arr: ['北京', '上海', '广州', '深圳'],
        },
        methods: {
            getWh() {
                var that = this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city1)
                    .then(function(res) {
                        // console.log(res);
                        console.log(res.data.data.forecast);
                        // console.log(this);
                        that.forecast = res.data.data.forecast;
                    }, function(erro) {
                        console.log(erro);
                    });
            },
            hotCity(city) {
                this.city1 = city;
                this.getWh();

            },
        }
    });
</script>

</html>